<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import router from '@/router';
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { editor, user } = useStore();
const { showList, text, nowTextId } = storeToRefs(editor);
const { id } = user;
const { getAllText } = editor;
const markDownEditor = defineAsyncComponent(() => import('@/components/MarkdownEditor.vue'));
const textList = defineAsyncComponent(() => import('@/components/TextList.vue'));
const handleToTodo = () => {
	router.push('/todo');
}
const handleNewText = () => {
	nowTextId.value = null;
	text.value = '';
}
const handleShowList = () => {
	showList.value = true;
	getAllText(id);
}
</script>

<template>
	<div id="edit">
		<mark-down-editor></mark-down-editor>
		<text-list></text-list>
		<button class="text-list" @click="handleShowList">文章列表</button>
		<button class="new-text" @click="handleNewText">写新文章</button>
		<button class="to-todo" @click="handleToTodo">待办清单</button>
	</div>
</template>

<style scoped lang="scss">
@import "@/assets/global";

#edit {
	margin: 130px 0 40px 0;
}

.to-todo:hover {
	color: $theme;
}

.new-text,
.text-list,
.to-todo {
	position: fixed;
	bottom: 22vh;
	right: $right_pos;
	cursor: pointer;
	font-size: 2.5rem;
}

.new-text {
	bottom: 34vh;
}

.text-list {
	bottom: 46vh;
}
</style>
